<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex  justify-start  " style="flex-direction: column;">
			<view class="flex2   response  flex  justify-start  " style="height:400rpx;min-height:unset;margin-top: 50px;border-radius: 25px;">
				<view style="position:relative;" class="banner3   ">
					<swiper :current="swiperCurrent3" autoplay="true" @change="swiperChange3" style="height:400rpx;">
						<swiper-item class="u-swiper-item" v-for="(item, index3) in label3List" :key="index3">
							<view class="u-list-image-wrap">
								<image class="u-swiper-image"  mode="aspectFill"   :src="item.image"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="u-swiper-indicator flex justify-center"
						:style="{width:  '100%',bottom:  '0px',padding: '24rpx'}">
					</view>
				</view>
			</view>
			<view class="flex4   response  flex  justify-around  " style="flex-direction: row;">
				<view class="flex5    flex  justify-start  " style="flex-direction: column;align-items: center;">
					<view class="flex6   response  flex  justify-start  "
						style="flex-direction: column;align-items: center;">
						<image style="width:96rpx;height:96rpx;min-height:unset;" mode="" class="picture7 radius "
							:src="picsrc7"></image>
					</view>
					<text> 评论</text>
				</view>
				<view class="flex9    flex  justify-start  " style="flex-direction: column;align-items: center;">
					<view class="flex10   response  flex  justify-start  "
						style="flex-direction: column;align-items: center;">
						<image style="width:96rpx;height:96rpx;min-height:unset;" mode="" class="picture11 radius "
							:src="picsrc11"></image>
					</view>
					<text> @我的</text>
				</view>
				<view class="flex13    flex  justify-start  " style="flex-direction: column;align-items: center;">
					<view class="flex14   response  flex  justify-start  "
						style="flex-direction: column;align-items: center;">
						<image style="width:96rpx;height:96rpx;min-height:unset;" mode="" class="picture15 radius "
							:src="picsrc15"></image>
					</view>
					<text> 点赞</text>
				</view>
				<view class="flex17    flex  justify-start  " style="flex-direction: column;align-items: center;">
					<view class="flex18   response  flex  justify-start  "
						style="flex-direction: column;align-items: center;">
						<image style="width:96rpx;height:96rpx;min-height:unset;" mode="" class="picture19 radius "
							:src="picsrc19"></image>
					</view>
					<text> 粉丝</text>
				</view>
			</view>
			<view class="flex21   response  flex  justify-center  " style="flex-direction: column;align-items: center;">
				<view class="flex22    flex  justify-start  " style="width:450rpx;height:118rpx;min-height:unset;"
					@click="to_draw">
					<image style="width:400rpx;height:120rpx;min-height:unset;" mode="" class="picture23 "
						:src="picsrc23"></image>
				</view>
			</view>
			<view class="flex24   response  flex  justify-start  "
				style="flex-direction: column;align-items: flex-start;">
				<text class="text25 "> 用户交流社区</text>
				<view class="flex26   response  flex  justify-start  "
					style="align-items: center;height:180rpx;min-height:unset;">
					<image style="width:230rpx;height:140rpx;min-height:unset;" mode="" class="picture27 radius "
						:src="picsrc27"></image>
					<text class="text28 "> #脸谱样式讲解</text>
				</view>
				<view class="flex29   response  flex  justify-start  "
					style="align-items: center;height:180rpx;min-height:unset;">
					<image style="width:230rpx;height:140rpx;min-height:unset;" mode="" class="picture30 radius "
						:src="picsrc30"></image>
					<text class="text31 "> #脸谱颜色区别</text>
				</view>
				<view class="flex32   response  flex  justify-start  "
					style="align-items: center;height:180rpx;min-height:unset;">
					<image style="width:230rpx;height:140rpx;min-height:unset;" mode="" class="picture33 radius "
						:src="picsrc33"></image>
					<text class="text34 "> #脸谱花纹</text>
				</view>
				<view class="flex35   response  flex  justify-start  "
					style="align-items: center;height:180rpx;min-height:unset;">
					<image style="width:230rpx;height:140rpx;min-height:unset;" mode="" class="picture36 radius "
						:src="picsrc36"></image>
					<text class="text37 "> #脸谱设计</text>
				</view>
				<view class="flex38   response  flex  justify-start  "
					style="align-items: center;height:180rpx;min-height:unset;">
					<image style="width:230rpx;height:140rpx;min-height:unset;" mode="" class="picture39 radius "
						:src="picsrc39"></image>
					<text class="text40 "> #经典脸谱欣赏</text>
				</view>
			</view>
		</view>

		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				swiperCurrent3: 0,
				/**single**/
				picsrc7: "https://shitangsys.cntdh.net//uploads/store/comment/20240403/8d2e454cff1e0d4b94bb6c5115a0f265.png",
				picsrc11: "https://shitangsys.cntdh.net//uploads/store/comment/20240403/dcd4ac580d0e3e165781de7fd2047a03.png",
				picsrc15: "https://shitangsys.cntdh.net//uploads/store/comment/20240403/80a09fdb46fc8b90bc58afeb6f1c72bc.png",
				picsrc19: "https://shitangsys.cntdh.net//uploads/store/comment/20240403/008b5d6fde92a7e0f7906612c41b7f43.png",
				picsrc23: "https://shitangsys.cntdh.net//uploads/store/comment/20240405/b63e295286003d3457be0c8f0148f8bc.png",
				picsrc27: "https://shitangsys.cntdh.net//uploads/store/comment/20240405/31e323fc67362f84ba0d4302b2bf61d4.jpg",
				picsrc30: "https://shitangsys.cntdh.net//uploads/store/comment/20240405/a3a0bd1e6932b326b0ee4bc78a41c9ec.jpg",
				picsrc33: "https://shitangsys.cntdh.net//uploads/store/comment/20240405/2b9a108759beddd14f43ff20e4eef792.jpg",
				picsrc36: "https://shitangsys.cntdh.net//uploads/store/comment/20240405/4630396b9b20f276fb6647b8f006321b.jpg",
				picsrc39: "https://shitangsys.cntdh.net//uploads/store/comment/20240405/b27b0fa4437063b586416e76db1100c5.jpg",


				label3List: [{
					"apiimg": "",
					"evtform": [],
					"event": "",
					"title": "1",
					"image": "/static/imgs/1.jpg"
				}, {
					"apiimg": "",
					"evtform": [],
					"event": "",
					"title": "2",
					"image": "/static/imgs/2.jpg"
				}],
				/**vuejs**/


			};
		},
		onLoad() {


		},
		methods: {
			to_draw() {
				uni.navigateTo({
					url: "./draw"
				})
			},

			/**
			 *          $vuetag = "";
			 *          $vuecss = "";
			 *          $vuejs = "";
			 *
			 */

			swiperChange3(e) {
				this.swiperCurrent3 = e.detail.current;
			},
			//获取数据

		}
	}
</script>

<style lang="less">
	/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		background-image: url(https://shitangsys.cntdh.net//uploads/store/comment/20240407/0b239dee1d14d96e92e39d25762b4410.jpg);
	}

	.flex2 {
		width: 100%;
		height: 400rpx;
	}

	/* 常用轮播图 css*/
	.u-swiper-image {
		width: 100%;
		will-change: transform;
		height: 100%;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		/* #ifdef H5 */
		pointer-events: none;
		/* #endif */
	}

	.u-swiper-indicator {
		padding: 0 24rpx;
		position: absolute;
		z-index: 1;
	}

	.u-indicator-item-rect {
		width: 26rpx;
		height: 8rpx;
		margin: 0 6rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-rect-active {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-dot {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-dot-active {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-round {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-round-active {
		width: 34rpx;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-number {
		padding: 6rpx 16rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.u-list-scale {
		transform-origin: center center;
	}

	.u-list-image-wrap {
		width: 100%;
		height: 100%;
		flex: 1;
		transition: all 0.5s;
		overflow: hidden;
		box-sizing: content-box;
		position: relative;
	}

	.u-swiper-title {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.3);
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		padding: 12rpx 24rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.u-swiper-item {
		overflow: hidden;
		align-items: center;
	}

	.banner3 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex4 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 50rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex5 {
		width: 20%;
	}

	.flex6 {
		width: 100%;
	}

	.picture7 {
		width: 96rpx;
		overflow: hidden;
		height: 96rpx;
	}

	.flex9 {
		width: 20%;
		background-repeat: no-repeat;
	}

	.flex10 {
		width: 100%;
	}

	.picture11 {
		width: 96rpx;
		overflow: hidden;
		height: 96rpx;
		background-position: center center;
	}

	.flex13 {
		width: 20%;
	}

	.flex14 {
		width: 100%;
	}

	.picture15 {
		width: 96rpx;
		overflow: hidden;
		height: 96rpx;
	}

	.flex17 {
		width: 20%;
	}

	.flex18 {
		width: 100%;
	}

	.picture19 {
		width: 96rpx;
		overflow: hidden;
		height: 96rpx;
	}

	.flex21 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex22 {
		width: 100%;
		width: 450rpx;
		height: 118rpx;
	}

	.picture23 {
		width: 400rpx;
		overflow: hidden;
		height: 120rpx;
	}

	.flex24 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-top: 2rpx dotted rgba(12, 13, 13, 1);
	}

	.text25 {
		padding-top: -10rpx;
		padding-bottom: 10rpx;
		padding-left: -10rpx;
		padding-right: 10rpx;
	}

	.flex26 {
		width: 100%;
		height: 180rpx;
		margin-top: 20rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border: 6rpx solid rgba(132, 249, 244, 1);
	}

	.picture27 {
		width: 21%;
		width: 230rpx;
		overflow: hidden;
		height: 140rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
	}

	.text28 {
		margin-left: 20rpx;
	}

	.flex29 {
		width: 100%;
		height: 180rpx;
		margin-top: 20rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border: 6rpx solid rgba(132, 249, 244, 1);
	}

	.picture30 {
		width: 21%;
		width: 230rpx;
		overflow: hidden;
		height: 140rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
	}

	.text31 {
		margin-left: 20rpx;
	}

	.flex32 {
		width: 100%;
		height: 180rpx;
		margin-top: 20rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border: 6rpx solid rgba(132, 249, 244, 1);
	}

	.picture33 {
		width: 21%;
		width: 230rpx;
		overflow: hidden;
		height: 140rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
	}

	.text34 {
		margin-left: 20rpx;
	}

	.flex35 {
		width: 100%;
		height: 180rpx;
		margin-top: 20rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border: 6rpx solid rgba(132, 249, 244, 1);
	}

	.picture36 {
		width: 21%;
		width: 230rpx;
		overflow: hidden;
		height: 140rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
	}

	.text37 {
		margin-left: 20rpx;
	}

	.flex38 {
		width: 100%;
		height: 180rpx;
		margin-top: 20rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border: 6rpx solid rgba(132, 249, 244, 1);
	}

	.picture39 {
		width: 21%;
		width: 230rpx;
		overflow: hidden;
		height: 140rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
	}

	.text40 {
		margin-left: 20rpx;
	}
</style>